<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta http-equiv="Pragma" content="no-cache"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/font.css"/>
		<link rel="stylesheet" href="css/swiper.min.css">
		<script>!function (e) { function t(a) { if (i[a]) return i[a].exports; var n = i[a] = { exports: {}, id: a, loaded: !1 }; return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports } var i = {}; return t.m = e, t.c = i, t.p = "", t(0) }([function (e, t) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); var i = window; t["default"] = i.flex = function (e, t) { var a = e || 100, n = t || 1, r = i.document, o = navigator.userAgent, d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i), l = o.match(/U3\/((\d+|\.){5,})/i), c = l && parseInt(l[1].split(".").join(""), 10) >= 80, p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi), s = i.devicePixelRatio || 1; p || d && d[1] > 534 || c || (s = 1); var u = 1 / s, m = r.querySelector('meta[name="viewport"]'); m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px" }, e.exports = t["default"] }]);
        flex(100, 1);
		</script>
		<style>
			body{
				overflow: hidden;
			}
			.swiper-container{
				height: 100vh;
			}
			.swiper-slide {
				overflow: hidden;
			}
			.anime{
				animation:mymove 2s infinite;
				-webkit-animation:mymove 2s infinite; /* Safari 和 Chrome */
			}
			@keyframes mymove
			{
			from {bottom:-5vh;}
			to {bottom:0;}
			}
			
			@-webkit-keyframes mymove /*Safari and Chrome*/
			{
			from {bottom:-5vh;}
			to {bottom:0;}
			}
			.zhezhao{
				background: rgba(0,0,0,0.6);
				z-index: 2 !important;
			}
			.none{
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<div style="position: absolute;margin-left:5vw;margin-top: 6.5vh;width: 90vw;height: 52vw;">
					<img src="img/btxx.png" style="position: relative;width: 100%;height: 100%;" />
					</div>
						<ul class="autoNum" style="position: absolute;padding:0;font-size: 5vw;width: 100%;text-align: center;color: #2553de;z-index: 8;top: 50vw;"></ul>
					<img src="img/btn-bg.png" width="30%" style="position: absolute;right: 10%;margin-top: 85%;z-index: 0;"/>
					<a class="btn"></a>
					<a class="five" style="width: 100vw;height: 100vh;z-index: 9;display: block; position: absolute;"></a>
					<img class="anime" src="img/btn-up.png" style="width: 10vw;position: absolute;left: 45vw;" />
				</div>
				<div class="swiper-slide">
					<div id="container">
						<div class="button" style="position: absolute;width: 100%;">
							<a class="btn-second one">
								<img src="img/w-q.png" />
								<img src="img/n-q.png" />
								<p>智慧家庭</p>
							</a>
							<a class="btn-second two">
								<img src="img/w-q.png" />
								<img src="img/n-q.png" />
								<p>智慧城市</p>
							</a>
							<a class="btn-second three">
								<img src="img/w-q.png" />
								<img src="img/n-q.png" />
								<p>整体形象和核心能力</p>
							</a>
							<a class="btn-second four">
								<img src="img/w-q.png" />
								<img src="img/n-q.png" />
								<p>hello 5G</p>
							</a>
							<img class="btn-img" src="img/3d.png" style="position: absolute;width: 100vw;top: 25vh;z-index: 0;" />
						</div>
						
					</div>
				</div>
				</div>
			</div>
		</div>
		<div class="center-box">
			<a id="five" class="five" style="width: 100vw;height: 100vh;display: block; position: absolute;top:0;"></a>
			<div>
				<div class='button-div' style="display: none;">
					<a></a>
					<b>智慧家庭</b>
					<p style="text-indent: 0;"><img src="img/01.jpg"/></p>
					<p>中国电信智慧家庭围绕“连接、内容、家居”三大生态，聚焦基础业务创新，光宽推进千兆升级，智能组网家庭WiFi网络打造，4K天翼高清。</p>
					<p>具体展示千兆光宽带覆盖、家庭WiFi智能组网，天翼高清，智能家居（天翼智能音箱、智能安防摄像头、门磁传感器、智能插座、环境监测仪、宠物喂食器、机器人、水浸传感器、量子等等）、小翼管家APP等。</p>
		
				</div>
				<div class='button-div' style="display: none;">
					<a></a>
					<b>智慧城市</b>
					<p style="text-indent: 0;"><img src="img/02.jpg"/></p>
					<p>“数字政府、数字经济、数字社会”整体提出“一网一云一平台N应用”新型顶层设计建议，建设城市泛在感知网、城市安全承载云、城市智慧管理云平台、城市各类特色应用。</p>
					<p>助力数字政府。政务服务平台助力“最多跑一次”、政府治理打造平安综合体及智慧消防实际应用。</p>
					<p>注智数字经济。智能制造、智慧特色小镇、智慧企业（协同办公、可视调度、运营服务）。</p>
					<p>助推数字政府。智慧医疗、智慧教育、智慧社区的解决方案和典型案例。</p>
		
				</div>
				<div class='button-div' style="display: none;">
					<a></a>
					<b>整体形象</b>
					<p style="text-indent: 0;"><img src="img/03.jpg"/></p>
					<p>中国电信展位，围绕“建设网络强国•引领智能未来”主题，展示中国电信整体形象和核心能力，以及赋能应用。</p>
					<p>整体形象及核能能力方面，改革开放四十周年、夯实网络强国根基、助力扶贫攻坚胜利、发挥云网融合优势、勇担央企社会责任，引领5G发展。</p>
					<p>赋能应用方面，助力数字政府、注智数字经济、助推数字社会、布局智慧家庭。</p>
		
				</div>
				<div class='button-div' style="display: none;">
					<a></a>
					<b> hello 5G</b>
					<p style="text-indent: 0;"><img src="img/04.jpg"/></p>
					<p>中国电信5G演示，分场外和场内两个部分。</p>
					<p>在外场中国电信在乌镇风景区，搭建了5G基站7个。其中在木心美术馆，通过5G网络技术实现8K视频直播。同时，1辆5G体验车，邀请记者现场真实体验中国电信5G高速网络。</p>
					<p>在内场，中国电信展位将重点展示5G硬件（5G有源天线系统、5G测试终端设备、5G测速演示）、、5G高速率（8K视频直播）、5G低延时（5G云渲染、机器人猜拳、5G远程控制挖掘机）、5G网络下的城市模型等展项。</p>
		
				</div>
			</div>
		</div>
				
		
	
	
	<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script type="text/javascript" src="js/swiper.min.js" ></script>
	<script>
		
	 var swiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
	    var ip=returnCitySN.cip;
	    four2sixip(ip);
	    function four2sixip(fouraddr)//IPV4转IPV6，只转地址
			{
			 var reg = fouraddr.match(/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/);
			 if(reg==null)
			 {
			 alert("IP地址不正确!");
			 return;
			 }
			 var sixtemp = "";
			 var fouraddrs = fouraddr.split(".");
			 for (var i=0; i<fouraddrs.length; i++)
			 {
			 var addr4ip = parseInt(fouraddrs[i], 10);
			 var addrtemp = addr4ip.toString(16);
			 if(addrtemp.length==1)
			 {
			 addrtemp = "0" + addrtemp;
			 }
			 sixtemp += addrtemp;
			 if(i==1)
			 {
			 sixtemp += ":";
			 }
			 }
			 //以上产生V6地址段正确
			 sixtemp = "fe80::9d38:6ab8:28e4:" + sixtemp;
			 var html = sixtemp;
			 $('.autoNum').html(html);
			}
			
			
			$(function() {
				$('#container .button a').click(function() {
					$(this).addClass('bgblue').siblings().removeClass('bgblue') //找到“red”类  找到每个div的所有同辈元素  从匹配的元素中删除 'red' 类//
					$('.button-div').eq($(this).index()).show().siblings().hide(); //获取这个匹配的元素 显示它  同类的元素隐藏//
					$('.center-box .five').addClass('zhezhao');
					$('.btn-second,.btn-img').addClass('none');
				})
			})
			$(function() {
				$('.center-box .five,.button-div a').click(function() {
					$('.button-div').hide();
					$('.center-box .five').removeClass('zhezhao');
					$('.btn-second,.btn-img').removeClass('none');
				})
			})
			$('body .five').on('touchmove', function (event) {
				    event.preventDefault();
				});
			$('body .btn').on('touchmove', function (event) {
				    event.preventDefault();
			});
			$('body .btn-second').on('touchmove', function (event) {
			    event.preventDefault();
			});
			$('body .button-div').on('touchmove', function (event) {
			    event.preventDefault();
			});
			
	</script>
	</body>   
</html>    
